<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/moban.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/common/reset.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/common/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/common/common.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/index.css" />
	
  </head>
  
  <body>
    <jsp:include page="top.jsp"></jsp:include>
    
    <section>
				<div class="Carousel">
					<div class="lubo_wrap">
						<ul class="pic_box">
							<li><img src="images/img-index/Carousel-big.jpg" /></li>
							<li><img src="images/img-index/Carousel-big.jpg" /></li>
							<li><img src="images/img-index/Carousel-big.jpg" /></li>
							<li><img src="images/img-index/Carousel-big.jpg" /></li>
							<li><img src="images/img-index/Carousel-big.jpg" /></li>
						</ul>

						<!--左右箭头-->
						<span id="left_arrow"><img src="images/img-index/right.png" style="padding:12px 0px;"/></span>
						<span id="right_arrow"><img src="images/img-index/right.png" style="padding:12px 0px;"/></span>
					</div>

					<!--控制点-->
					<div class="sm_picture">
						<ul class="pannel">
							<li class="">
								<a href="javascript:void(0)"><img src="images/img-index/Carousel-sm-1.jpg" alt="图片无法显示" /></a>
							</li>
							<li>
								<a href="javascript:void(0)"><img src="images/img-index/Carousel-sm-2.jpg" alt="图片无法显示" /></a>
							</li>
							<li>
								<a href="javascript:void(0)"><img src="images/img-index/Carousel-sm-3.jpg" alt="图片无法显示" /></a>
							</li>
							<li>
								<a href="javascript:void(0)"><img src="images/img-index/Carousel-sm-4.jpg" alt="图片无法显示" /></a>
							</li>
							<li>
								<a href="javascript:void(0)"><img src="images/img-index/Carousel-sm-5.jpg" alt="图片无法显示" /></a>
							</li>
						</ul>
					</div>
				</div>
			</section>
			<div class="content-box">
				<section>
					<div class="content content_recommend clearfix">
						<div class="title">
							<h2>产品推荐</h2>
							<span></span>
						</div>
						<div class="clear"></div>

						<div id="goods-recommend" class="goods-recommend">
							<div class="lubo_wrap">
								<ul class="pic_box">
									<li>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-1.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-2.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-3.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-4.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
									</li>
									<li>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-1.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-2.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-3.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
										<div>
											<a href="exports/custom_detail.html">
												<img src="images/img-index/recommend-4.jpg" alt="图片无法显示" />
											</a>
											<p>
												<a href="">竞技版骑行上衣</a>
											</p>
											<div>
												<a href="">森地客</a>
												<a href="">春季款</a>
											</div>
											<span>¥299</span>
										</div>
									</li>

								</ul>
								<span id="left_arrow" class="turn_left"><img src="images/img-index/right.png"/></span>
								<span id="right_arrow" class="turn_right"><img src="images/img-index/right.png"/></span>

							</div>
						</div>

					</div>
				</section>
				<div class="banner">
					<a href="javascript:void(0)"><img src="images/img-index/banner.jpg" alt="图片无法显示" /></a>
				</div>
				<section>
					<div class="content content_Cycling-wear">
						<div class="title">
							<h2>定制骑行服</h2>
							<span></span>
							<a href="">more</a>
						</div>
						<div class="clear"></div>
						<div class="goods-Cycling-wear clearfix">
							<div class="prod_type_nav fl">
								<div>
									<img src="images/index/title_pic_01.jpg" />
									<p>配件</p>
								</div>
								<ul>
									<li>
										<a href="">短袖上衣</a>
									</li>
									<li>
										<a href="">长袖上衣</a>
									</li>
									<li>
										<a href="">短裤</a>
									</li>
									<li>
										<a href="">长裤</a>
									</li>
									<li>
										<a href="">背带短裤</a>
									</li>
									<li>
										<a href="">背带长裤</a>
									</li>
									<li>
										<a href="">短袖连体服</a>
									</li>
									<li>
										<a href="">长袖连体服</a>
									</li>
									<li>
										<a href="">儿童版短袖</a>
									</li>
									<li>
										<a href="">儿童版长袖</a>
									</li>
								</ul>
							</div>

							<!--<ul class="prod_type_pic fl">-->
								<!--<li>-->
									<!--<a href="">-->
										<!--<img src="images/index/pic_01.jpg" />-->
										<!--<p>POLO衫</p>-->
									<!--</a>-->
								<!--</li>-->
								<!--<li>-->
									<!--<a href="">-->
										<!--<img src="images/index/pic_01.jpg" />-->
										<!--<p>短裤</p>-->
									<!--</a>-->
								<!--</li>-->
							<!--</ul>-->

							<ul class="prod_list fr">
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-2.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="exports/custom_detail.html" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="exports/custom_detail.html"><img src="images/img-index/Cycling-wear-3.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="exports/custom_detail.html" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-4.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="exports/custom_detail.html" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-7.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-8.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-9.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-8.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Cycling-wear-9.jpg" alt="图片无法显示" /></a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</section>
				<section>
					<div class="content content_Running-clothes">
						<div class="title">
							<h2>定制跑步服</h2>
							<span></span>
							<a href="">more</a>
						</div>
						<div class="clear"></div>
						<div class="goods-Running-clothes clearfix">
							<div class="prod_pub">
								<div>
									<a href="">
										<img src="images/index/prod_pub_03.jpg" />
										<p>
											<strong>Customized Jacket</strong>
											<span>普及版</span>
										</p>
									</a>
								</div>
								<div>
									<a href="">
										<img src="images/index/prod_pub_03.jpg" />
										<p>
											<strong>Customized Jacket</strong>
											<span>专业版</span>
										</p>
									</a>
								</div>
							</div>

							<div class="prod_type_nav fl">
								<ul>
									<li>
										<a href="">短袖上衣</a>
									</li>
									<li>
										<a href="">长袖上衣</a>
									</li>
									<li>
										<a href="">短裤</a>
									</li>
									<li>
										<a href="">长裤</a>
									</li>
									<li>
										<a href="">背带短裤</a>
									</li>
									<li>
										<a href="">背带长裤</a>
									</li>
								</ul>
							</div>

							<ul class="prod_list fr">
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Running-clothes-3.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Running-clothes-3.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Running-clothes-4.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/Running-clothes-5.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<div class="clear"></div>
							</ul>
							<div class="clear"></div>
						</div>
					</div>
				</section>
				<section>
					<div class="content content_Tie-san">
						<div class="title">
							<h2>定制铁三服</h2>
							<span></span>
							<a href="">more</a>
						</div>
						<div class="clear"></div>
						<div class="goods-Tie-san clearfix">
							<div class="prod_pub">
								<div>
									<a href="">
										<img src="images/index/prod_pub_03.jpg" />
										<p>
											<strong>Customized Jacket</strong>
											<span>普及版</span>
										</p>
									</a>
								</div>
								<div>
									<a href="">
										<img src="images/index/prod_pub_03.jpg" />
										<p>
											<strong>Customized Jacket</strong>
											<span>专业版</span>
										</p>
									</a>
								</div>
							</div>

							<div class="prod_type_nav fl">
								<div>
									<img src="images/index/title_pic_02.jpg" />
									<p>配件</p>
								</div>
								<ul>
									<li>
										<a href="">短袖上衣</a>
									</li>
									<li>
										<a href="">长袖上衣</a>
									</li>
									<li>
										<a href="">短裤</a>
									</li>
								</ul>
							</div>

							<ul class="prod_list fr">
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/content_Tie-san-3.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/content_Tie-san-3.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/content_Tie-san-4.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<li class="dh">
									<a href="javascript:void(0)"><img src="images/img-index/content_Tie-san-5.jpg" alt="图片无法显示" />
									</a>
									<div class="text">
										<p>男士骑行上衣</p>
										<span>¥<span>299</span></span>
										<a href="javascript:void(0)" class="qiuqiu"><img src="images/img-index/round.jpg" alt="图片无法显示" /><span>立即定制</span></a>
									</div>
								</li>
								<div class="clear"></div>
							</ul>
						</div>
					</div>
				</section>
				<section>
					<div class="content content_Arder">
						<div class="title">
							<h2>定制休闲款</h2>
							<span></span>
						</div>
						<div class="clear"></div>
						<div class="goods-Arder">
							<ul class="prod_type_pic clearfix">
								<li>
									<a href="">
										<img src="images/index/casualwear_01.jpg" />
										<p>POLO衫</p>
									</a>
								</li>
								<li>
									<a href="">
										<img src="images/index/casualwear_02.jpg" />
										<p>短裤</p>
									</a>
								</li>
								<li>
									<a href="">
										<img src="images/index/casualwear_03.jpg" />
										<p>帽衫</p>
									</a>
								</li>
								<li>
									<a href="">
										<img src="images/index/casualwear_04.jpg" />
										<p>T恤</p>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</section>
				<section>
					<div class="title">
						<h2>品牌专区</h2>
						<span></span>
					</div>
					<div class="clear"></div>
					<div class="brand clearfix">
						<ul>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href=""><img src="images/index/brand_01.jpg" /></a>
							</li>
							<li>
								<a href="">MORE ></a>
							</li>
						</ul>
					</div>
				</section>
			</div>
    
    <jsp:include page="footer.jsp"></jsp:include>
  </body>
    <script src="js/common/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bluej_lunbo.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
			//首页轮播图
			var lunbo1 = new lunbo(".Carousel", 470 / 1365, true, false, 500, true);

			//推荐产品轮播图
			var lunbo2 = new lunbo("#goods-recommend", 140 / 1000, true, false, 600, false);

			function setArrow() {
				var windowsWidth = $(window).width(),
					arrowHeight = $(".lubo_wrap li").height(),
					arrowWidth = (windowsWidth - 1000) / 2 > 0 ? ((windowsWidth - 1000) / 2) : 0;
			}
			setArrow();

			$(window).resize(function() {
				setArrow();
			});
		</script>
</html>
